<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <!-- 基本循环数组 -->
            <li v-for="item in list">{{item}}</li>
        </ul>
        <ul>
            <li v-for="(item,index) in list" :key="index">{{index}}----{{item}}</li>
        </ul>
        <ul>
            <!-- v-for循环对象 -->
            <li v-for="(val,key,index) in car" :key="index">
                {{index}}---{{key}}---{{val}}
            </li>
        </ul>
        <!-- 固定循环  次数
        x从1开始   -->
        <ul>
            <li v-for="x in 6">
                第{{x}}名
            </li>
        </ul>
        <!-- -->
        <ul>
            <li v-for="(item,index) in prolist" :key="item.id">
                <span>{{item.id}}</span>--
                <span>{{item.pname}}</span>--
                <span>{{item.price}}</span>--
                <span>{{item.color}}</span>
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        // v-for="item in 数据" 指令循环克隆元素
        // v-for 循环数组  item in 数组  ---item代表数组项
        // v-for 循环数组  "(item,index) in 数组"  item数组项 index下标
        // vue v-for循环为什么要绑定key 
        // 由于v-for 生成的都是虚拟dom 虚拟dom在从新排序时候 容易发生错乱
        // 使用key绑定唯一标识 防止错乱

        // v-for循环对象 "(val,key,index) in obj"
        new Vue({
            el: "#app",
            data() {
                return {
                    list: ["首页", "新闻", "汽车", "美女"],
                    car: {
                        name: "q8",
                        price: 4000,
                        des: "8手qq"
                    },
                    prolist: [{
                        id: 1,
                        pname: "iphone13",
                        price: 8000,
                        color: "蓝色"
                    }, {
                        id: 2,
                        pname: "小米11",
                        price: "2999",
                        color: "红色"
                    }, {
                        id: 3,
                        pname: "诺基亚5233",
                        color: "黑色",
                        price: "2500"
                    }]
                }
            }
        })
    </script>
</body>

</html>